<template>
  <Panel title="管理员信息">
    <div slot="container">
      <div>
        管理员ID: <span>{{ user.id }}</span>
      </div>
      <el-divider></el-divider>
      <div>
        账号: <span>{{ user.account }}</span>
      </div>
      <el-divider></el-divider>
      <div>
        用户组: <span>{{ user.userGroup }}</span>
      </div>
      <el-divider></el-divider>
      <div>
        创建时间: <span>{{ user.ctime | normalDate }}</span>
      </div>
      <el-divider></el-divider>

      <div class="df">
        管理员头像:
        <!-- <el-avatar shape="square" :size="50" :src="squareUrl"></el-avatar> -->
        <el-upload
          class="avatar-uploader"
          action="http://sell.h5.itsource.cn:8087/users/avatar_upload"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="user.imgUrl" :src="user.imgUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </div>
    </div>
  </Panel>
</template>

<script>
import Panel from "@/components/Panel.vue";
import { mapState } from "vuex";
import { reqUploadAvatar } from "@/api/user";
export default {
  components: {
    Panel,
  },
  data() {
    return {};
  },

  computed: {
    ...mapState(["user"]),
  },

  methods: {
    handleAvatarSuccess(file) {
      // // this.imageUrl = URL.createObjectURL(file.raw);
      // console.log(res);
      if (file.code == 0) {
        this.$store.commit("SET_USERDATA", {
          ...this.user,
          imgUrl: file.imgUrl,
        });
        //修改当前用户头像
        reqUploadAvatar({ imgUrl: file.imgUrl });
      }
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isPNG = file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG && !isPNG) {
        this.$message.error("上传头像图片只能是 JPG,PNG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return (isJPG || isPNG) && isLt2M;
    },
  },
};
</script>

<style lang="less" scoped>
.avatar-uploader {
  margin-left: 20px;
}
.avatar-uploader .el-upload {
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
.df {
  display: flex;
  align-items: center;
}
</style>